<div>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="col-md-4 control-label">
        Enabled
      </label>
      <div class="col-md-8">
        <input type="checkbox" [disabled]="!canEdit" name="enabled" [(ngModel)]="config.enabled">
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label">
        Debug
      </label>
      <div class="col-md-8">
        <input type="checkbox [disabled]="!canEdit"" name="debug" [(ngModel)]="config.debug">
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label">
        Kerberos Config File
        <!-- <a href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="right" data-container="body"
          data-content="{{ 'sec.kerberos.configFile' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a> -->
      </label>
      <div class="col-md-8">
        <input type="text" class="form-control" name="krb5_config" [(ngModel)]="config.krb5_config">
      </div>
    </div>

    <!--SERVICE-->
    <div class="form-group">
      <label class="col-md-4 control-label">
        Service ktname
        <!-- <a href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="right" data-container="body"
          data-content="{{ 'sec.kerberos.service.ktname' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a> -->
      </label>
      <div class="col-md-8">
        <input type="text" [disabled]="!canEdit" class="form-control" name="service_ktname" [(ngModel)]="config.service.ktname">
      </div>
    </div>

    <div class="form-group">
      <label class="col-md-4 control-label">
        Service principal
        <!-- <a href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="right" data-container="body"
          data-content="{{ 'sec.kerberos.service.principal' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a> -->
      </label>
      <div class="col-md-8">
        <input type="text" [disabled]="!canEdit" class="form-control" name="service_principal" [(ngModel)]="config.service.principal">
      </div>
    </div>


    <!--SPNEGO-->
    <div class="form-group">
      <label class="col-md-4 control-label">
        SPNEGO ktname
        <!-- <a href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="right" data-container="body"
          data-content="{{ 'sec.kerberos.spnego.ktname' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a> -->
      </label>
      <div class="col-md-8">
        <input type="text" [disabled]="!canEdit" class="form-control" name="spnego_ktname" [(ngModel)]="config.spnego.ktname">
      </div>
    </div>

    <div class="form-group">
      <label class="col-md-4 control-label">
        SPNEGO principal
        <!-- <a href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="right" data-container="body"
          data-content="{{ 'sec.kerberos.spnego.principal' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a> -->
      </label>
      <div class="col-md-8">
        <input type="text" [disabled]="!canEdit" class="form-control" name="spnego_principal" [(ngModel)]="config.spnego.principal">
      </div>
    </div>

    <!--CLIENT-->

    <div class="form-group">


      <label class="col-md-4 control-label">
        Client ccname
        <!-- <a href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="right" data-container="body"
          data-content="{{ 'sec.kerberos.client.ccname' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a> -->
      </label>
      <div class="col-md-8">
        <input type="text" [disabled]="!canEdit" class="form-control" name="client_ccname" [(ngModel)]="config.client.ccname">
      </div>
    </div>

    <div class="form-group">

      <label class="col-md-4 control-label">
        Client ktname
        <!-- <a href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="right" data-container="body"
          data-content="{{ 'sec.kerberos.client.ktname' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a> -->
      </label>
      <div class="col-md-8">
        <input type="text" [disabled]="!canEdit" class="form-control" name="client_ktname" [(ngModel)]="config.client.ktname">
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label">
        Client useTicketCache
        <!-- <a href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="right" data-container="body"
          data-content="{{ 'sec.kerberos.client.useTicketCache' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a> -->
      </label>
      <div class="col-md-8">
        <input type="checkbox" [disabled]="!canEdit" name="client_useTicketCache" [(ngModel)]="config.client.useTicketCache">
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label">
        Client principal
        <!-- <a href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="right" data-container="body"
          data-content="{{ 'sec.kerberos.client.principal' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a> -->
      </label>
      <div class="col-md-8">
        <input type="text" [disabled]="!canEdit" class="form-control" name="client_principal" [(ngModel)]="config.client.principal">
      </div>
    </div>


    <div class="form-group">
      <label class="col-md-4 control-label">
        Renewal Period
        <!-- <a href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="right" data-container="body"
          data-content="{{ 'sec.kerberos.client.renewalPeriod' | translate:links }}" bs-popover>
          <i class="fa fa-question-circle"></i>
        </a> -->
      </label>
      <div class="col-md-8">
        <input type="number" [disabled]="!canEdit" class="form-control" name="client_renewalPeriod" [(ngModel)]="config.client.renewalPeriod">
      </div>
    </div>
  </form>

</div>